<template>
    <div>
        <img src="/img/left.png">
        <div id="right" ><p>账号登录</p>
          <input class="text" type="text" v-model="username" placeholder="请输入账户名">
          <input class="text" type="password"  v-model="upwd" placeholder="请输入密码"><br>
          <a href="" id="wj">忘记密码</a>
          <button @click.prevent="login">登录</button>
          <p>还没有账号？<a href="">免费注册</a><br>
          <input type="checkbox" v-model="yidu">我已阅读并同意<span>《美团用户协议》《隐私政策》</span>，
            并授权美团使用该美团账号信息（如昵称、头像、收货地址）进行统一管理</p>

        </div>

    </div>
    
</template>

<script>
import axios from 'axios'
export default {
  name: 'Logn',
  data(){
    return{
      username:"",
      upwd:"",
      yidu:"",
      user:[],

    }

  },
  components: {
  },
  methods:{
    login(){
      console.log(this.yidu);
      if(this.username==""){
            this.$message.error("请输入用户名");
					return;
				};
        if(this.upwd==""){
            this.$message.error("请输入密码");
					return;
				};
          if(this.yidu==false){
            this.$message.error("请选择已阅读用户协议");
					return;
				};

          axios.get('http://localhost:8080/login?username='+this.username+'&pwd='+this.upwd)
          .then(resp=>{
              this.user=resp.data;
              console.log( this.user);

              if(this.user==null){
                this.$message.error('账户错误');
              }else{
                this.$store.state.denglu=true;
                this.$store.state.user=this.user;
                sessionStorage.setItem('myuser',JSON.stringify(this.user));
                console.log(this.$store.state.denglu);
                if(this.$route.query.Id!=null){
                  this.$router.push({ path: '/buy', query: { userId:this.$route.query.Id ,cid:this.$route.query.cid}});
                }else{
                  this.$router.push('/gjibenxinxi');
                }
                
              }
          }).catch(function (error) {
                  console.log(error);
              })
          
      }

  }
}
</script>

<style scoped>
  .text{
    width: 300px;
    height: 40px;
    margin-top: 20px;
  }
  button{
    width: 308px;
    height: 40px;
    background-color: rgb(255, 0, 0);
    margin-top: 30px;
    border: none;
    margin-bottom: 10px;
    font-size: 20px;
    color:rgb(139, 0, 0);
  }
  button:hover{
    box-shadow: 1px 0px 2px 1px #aaaaaa;
  }
  p{
    margin-top: 10px;
  }
  #wj{
    float: right;
  }
  span{
    color:rgb(255, 0, 0);
  }
  *{
    margin: 0px;
    padding: 0px;
  }
  img{
    float: left;
  }
  #right{
    padding-top:50px ;
    float: left;
    width: 300px;

  }

</style>